<template>
	<div>
		<!-- 横向分布 justify-content:flex-start-->
		<!-- 纵向居中 align-items:center -->
		<div style="z-index: 2;display: flex;justify-content: flex-start;
			background-color: rgb(243, 244, 246);
			height: 11%;
			position: fixed;top: 0;left: 0;width: 100%;
			border-bottom:0.5px solid #c3b2bb;align-items: center;">
			<div style="font-size: 20px;margin-left: 0px;height: 11vh;
			text-align: center;width: 100px;line-height: 11vh;
			cursor: pointer;" @click="gotoHome()">Aria</div>
			<form
				style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
				<div class="inputBox">
					<input id="inputtop" type="text" placeholder="">
				</div>
				<span style="width: 10px;"></span>
				<div class="inputBox">
					<input type="submit" value="检索">
				</div>
			</form>
			<span style="width: 20%;"></span>
			<div style="height: 11vh;align-items: center;line-height: 11vh;">{{this.$store.state.borderflag}}</div>
			<span style="width: 5%;"></span>
			<div style="line-height: 11vh;">欢迎，xxx</div>
			<button class="logout" style="height: 40px;position: absolute;right:30px;">退出登录</button>
		</div>
		<div class="shell" style="top: 8%;z-index: 1;position: fixed;left:0" @mouseover="changeflag(true)"
			@mouseout="changeflag(false)">
			<a class="box"><span></span></a>
			<a style="cursor: pointer;" class="box" @click="gotoMsg()"><i
					class="el-icon-user-solid"></i><span>个人信息</span></a>
			<!-- <a style="cursor: pointer;" class="box" @click="gotoColl()"><i
					class="el-icon-star-on"></i><span>关注</span></a> -->
			<a style="cursor: pointer;" class="box"><i class="el-icon-message-solid"></i><span>消息中心</span></a>
			<a style="cursor: pointer;" class="box"><i class="el-icon-s-platform"></i><span>最近浏览</span></a>
			<a style="cursor: pointer;" class="box"><i class="el-icon-s-flag"></i><span>门户系统</span></a>
		</div>



		<div style="width: 66%; left: 17%; top: 18%; position:absolute">
			<div style="width: 70%; display: inline-block; vertical-align: top;">
				<div style="width: 95%; margin: 0 auto; line-height: 30px;">
					<div style="font: normal bold 30px/55px serif">{{ headline }}</div>
					<div style="color: rgb(156, 156, 156); line-height: 40px; ">阅读量：{{ reading }}</div>
					<div style="display: inline-block; width: 10%; vertical-align: top">作者：</div>
					<div style="display: inline-block; width: 90%">
						<div class="link" @click="gotoAuther(aid)">{{ auther }}</div>
					</div>
					<div style="display: inline-block; width: 10%; vertical-align: top">摘要：</div>
					<div style="display: inline-block; width: 90%">{{ abstract }}</div>
					<div style="display: inline-block; width: 10%; vertical-align: top">关键词：</div>
					<div style="display: inline-block; width: 90%">
						<div style="display: inline-block;" v-for="keyword in keywords">{{ keyword+"\xa0" }}</div>
					</div>
					<div style="display: inline-block; width: 10%; vertical-align: top">被引量：</div>
					<div style="display: inline-block; width: 90%">{{ cited }}</div>
					<div style="display: inline-block; width: 10%; vertical-align: top">年份：</div>
					<div style="display: inline-block; width: 90%">{{ year }}</div>
					<div style="height: 15px;"></div>
					<el-button type="info" size="mini" icon="el-icon-star-off" round v-if="collectFlag===false"
						@click="collect(collectFlag)">收藏</el-button>
					<el-button type="info" size="mini" icon="el-icon-star-on" round v-else="collectFlag===true"
						@click="collect(collectFlag)">已收藏</el-button>
					<el-button type="info" size="mini" icon="el-icon-edit" round @click="citeVisible=true">引用
					</el-button>
					<el-button type="info" size="mini" icon="el-icon-share" round @click="shareVisible=true">分享</el-button>
					<div style="height: 20px;"></div>
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
						default-active="1" active-text-color="#686868">
						<el-menu-item index="1" @click="changeMenu(1)">相似文献</el-menu-item>
						<el-menu-item index="2" @click="changeMenu(2)">参考文献</el-menu-item>
						<el-menu-item index="3" @click="changeMenu(3)">引证文献</el-menu-item>
					</el-menu>
					<div style="height: 10px;"></div>
					<div v-show="menu===1" v-for="l in similar">
						<div style="height: 8px;"></div>
						<div class="link" @click="gotoLiterature(l.lid)" style="font-size: 20px; line-height: 40px;">
							{{ l.headline }}
						</div>
						<div>{{ l.abstract }}</div>
						<div class="link" @click="gotoAuther(l.aid)">{{ l.auther }}</div>
						<div style="color: rgb(156, 156, 156)">
							被引量：{{ l.cited+"\xa0\xa0\xa0\xa0\xa0\xa0" }}发表：{{ l.year }}年</div>
						<hr size=1px style="border: 0; background-color: #eee; height: 1px;">
						<div style="height: 10px;"></div>
					</div>
					<div v-show="menu===2" v-for="l in reference">
						<div style="height: 8px;"></div>
						<div class="link" @click="gotoLiterature(l.lid)" style="font-size: 20px; line-height: 40px;">
							{{ l.headline }}
						</div>
						<div>{{ l.abstract }}</div>
						<div class="link" @click="gotoAuther(l.aid)">{{ l.auther }}</div>
						<div style="color: rgb(156, 156, 156)">
							被引量：{{ l.cited+"\xa0\xa0\xa0\xa0\xa0\xa0" }}发表：{{ l.year }}年</div>
						<hr size=1px style="border: 0; background-color: #eee; height: 1px;">
						<div style="height: 10px;"></div>
					</div>
					<div v-show="menu===3" v-for="l in citing">
						<div style="height: 8px;"></div>
						<div class="link" @click="gotoLiterature(l.lid)" style="font-size: 20px; line-height: 40px;">
							{{ l.headline }}
						</div>
						<div>{{ l.abstract }}</div>
						<div class="link" @click="gotoAuther(l.aid)">{{ l.auther }}</div>
						<div style="color: rgb(156, 156, 156)">
							被引量：{{ l.cited+"\xa0\xa0\xa0\xa0\xa0\xa0" }}发表：{{ l.year }}年</div>
						<hr size=1px style="border: 0; background-color: #eee; height: 1px;">
						<div style="height: 10px;"></div>
					</div>
				</div>
			</div>
			<div style="width: 30%; display: inline-block; vertical-align: top;">
				<div style="width: 95%; margin: 0 auto">
					<div style="font-size: 20px; line-height: 50px;">来源期刊</div>
					<img :src="img" alt="" width="40%">
					<div style="display: inline-block; vertical-align: top; width: 8%;"></div>
					<div style="display: inline-block; vertical-align: top;">{{ source }}</div>
					<div style="height: 20px;"></div>
					<hr size=1px style="border: 0; background-color: #eee; height: 1px;">
					<div style="font-size: 20px; line-height: 50px;">引用走势</div>
					<div id="line" style="width: 100%; height: 300px"></div>
					<div style="height: 20px;"></div>
					<hr size=1px style="border: 0; background-color: #eee; height: 1px;">
					<div style="font-size: 20px; line-height: 50px;">论文参与者</div>
					<div style="text-align:center">
						<el-avatar :size="70" :src="circleUrl"></el-avatar>
						<div class="link" style="line-height: 3; margin: 0 auto;" @click=gotoAuther(aid)>{{ auther }}
						</div>
					</div>
					<div style="height: 20px;"></div>
					<hr size=1px style="border: 0; background-color: #eee; height: 1px;">
				</div>
			</div>
		</div>

		<el-dialog title="引用" :visible.sync="citeVisible" center=true>
			<div id="target1" style="display: inline-block; width: 90%" v-text="quote()"></div>
			<div style="display: inline-block; width: 10%; vertical-align: top">
				<div class="copy el-icon-document-add" style="width: fit-content;" @click="copy('target1')">复制</div>
			</div>
		</el-dialog>

		<el-dialog title="分享" :visible.sync="shareVisible" center=true>
			<div id="target2" style="display: inline-block; width: 90%">
				<el-link type="primary" :href="share()" v-text="share()"></el-link>
			</div>
			<div style="display: inline-block; width: 10%; vertical-align: top">
				<div class="copy el-icon-document-add" style="width: fit-content;" @click="copy('target2')">复制</div>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import image from '../assets/软件学报.png';
	import * as echarts from 'echarts';

	export default {

		name: 'Literature',
		components: {},

		data() {
			return {

				iscollected: false,

				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

				is_loading: true,
				menu: 1,
				citeVisible: false,
				shareVisible: false,

				collectFlag: false,

				img: image,

				lid: '1',
				aid: "2",
				headline: "软件工程技术发展思索",
				reading: 476,
				auther: "杨芙清",
				abstract: "在4个方面对软件工程技术的发展进行一些思索:(1) 从事物发展规律的角度,揭示软件工程技术发展历程;(2) 从软件本质特征的角度,浅析虚拟机各抽象层次的构造;(3) 从软件开发的本质,提出了软件工程学科研究的内容,并研究了软件工业化生产模式;(4) 以Internet的出现为背景,探索了软件技术的发展趋势.",
				keywords: ["软件工程", "软件特征", "软件工业化生产", "软件复用", "网构软件"],
				cited: 700,
				year: 2005,
				source: "软件学报",

				similar: [{
					lid: "3",
					aid: "4",
					headline: "论述软件工程技术发展思索与应用",
					abstract: "软件作为一种特别的产品,软件的发展规模与繁琐性不断地提高.本文主要从四个层面对软件工程技术的发展进行一些思索:第一,就事物发展规律的视角,阐述了软基工程技术的发...",
					auther: "侯国熙",
					cited: 18,
					year: 2012
				}, {
					lid: "5",
					aid: "6",
					headline: "分析软件工程技术发展思索",
					abstract: "软件是一种特殊的产品,随着科学技术发展,软件在规模还有繁琐性等方面也逐渐提高.本文主要从几个角度对软件工程的技术发展进行阐述:(1)事物发展规律角度;(2)软件本质特...",
					auther: "王岩",
					cited: 4,
					year: 2013
				}],
				reference: [{
					lid: "7",
					aid: "8",
					headline: "支持构件复用的青鸟Ⅲ型系统概述",
					abstract: "一,引言 1.1 软件构件软件构件技术是支持软件复用的核心技术,是近几年来迅速发展并受到高度重视的一个学科分支.其主要研究内容包括: 1.构件获取:有目的的构件生产和从...",
					auther: "杨芙清",
					cited: 368,
					year: 1999
				}, {
					lid: "9",
					aid: "10",
					headline: "浅谈软件工程",
					abstract: '1968年秋季,NATO(北约)的科技委员会讨论和制定摆脱"软件危机"的对策.第一次提出了软件工程(software engineering)的概念.至今软件工程已经走过了30多年的历程.在不断...',
					auther: "刘伟",
					cited: 29,
					year: 2005
				}],
				citing: [{
					lid: "11",
					aid: "12",
					headline: "面向服务架构参考模型及应用研究",
					abstract: "Service-oriented architecture(SOA) is a coarse-grained, loosely coupled system architecture which supports dynamic enterprise application integration. A SO...",
					auther: "李建华",
					cited: 267,
					year: 2006
				}],

				x: [2005, 2006, 2007, 2008, 2009],
				y: [820, 932, 901, 934, 190]

			};
		},

		mounted() {
			this.drawLine();
			const that = this;
			that.is_loading = true;
			that.lid = that.$route.params.id;
			that.axios.post("/paperinfo/", {
				lid: that.lid,
				uid: that.$store.state.uid
			}).then(
				function(res) {
					var obj1 = JSON.parse(res.data);
					that.collectFlag = obj1.collectFlag;
					that.aid = obj1.aid;
					that.headline = obj1.headline;
					that.reading = obj1.reading;
					that.auther = obj1.auther;
					that.abstract = obj1.abstract;
					that.keywords = obj1.keywords;
					that.cited = obj1.cited;
					that.year = obj1.year;
					that.source = obj1.source;
					// that.img = obj1.img;
					// that.circleUrl = obj1.circleUrl;
					obj1.similar.forEach((l) => {
						that.similar.push(l);
					})
					obj1.reference.forEach((l) => {
						that.reference.push(l);
					})
					obj1.citing.forEach((l) => {
						that.citing.push(l);
					})
					that.x = obj1.x;
					that.y = obj1.y;
				},
				function() {}
			).finally(() => this.is_loading = false)

		},

		methods: {
			gotoHome() {
				this.$router.push('/');
			},
			clickinput() { //onfocus
				document.getElementById("inputtop").placeHolder = "";
			},
			outinput() { //onblur
				document.getElementById("inputtop").placeHolder = "请输入内容";
			},
			gotoMsg() {
				this.$router.push('/personalpage/personmsg');
			},
			gotoColl() {
				// this.$router.push('/personalpage/personalcollect');
				const self = this;
				self.axios({
					method: 'post',
					url: '/collectone/',
					data: {
						id: this.lid,
					},
					headers: {
						'X-CSRFToken': this.getCookie('csrftoken')
					},
				}).then(res => {
					var obj = JSON.parse(res.data)
					this.is_subscribed = obj.is_subscribed;
					if (this.is_subscribed) {
						this.$message({
							message: '收藏成功！',
							type: 'success'
						});
					} else {
						this.$message({
							message: '取消收藏成功！',
							type: 'success'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			},
			changeflag(flag) {
				if (flag === true) {
					this.$store.state.divflag = false;
				} else {
					this.$store.state.divflag = true;
				}
			},

			gotoAuther(aid) {
				let url = this.$router.resolve({
					path: '/',
					query: {
						aid: aid
					}
				});
				window.open(url.href, '_blank');
			},
			gotoLiterature(lid) {
				let url = this.$router.resolve({
					path: '/',
					query: {
						lid: lid
					}
				});
				window.open(url.href, '_blank');
			},
			collect(flag) {
				if (this.$store.state.isLogin === false) {
					let url = this.$router.resolve('/');
					window.open(url.href, '_blank');
				} else {
					this.axios({
						method: 'post',
						url: '',
						data: {
							uid: this.$store.state.uid,
							lid: this.lid,
							flag: flag // 0收藏 1取消收藏
						},
						headers: {
							'X-CSRFToken': this.getCookie('csrftoken')
						},
					}).then(res => {
						var obj = res.data
						var msg = flag ? "收藏" : "取消收藏";
						if (obj.code == 0) {
							this.$message.error({
								message: msg + "失败",
								center: true
							});
						} else {
							this.collectFlag = !this.collectFlag;
							this.$message.success({
								message: msg + "成功",
								center: true
							});
						}
					}).catch(err => {
						console.log(err);
					})
				}
			},
			quote() {
				return "[1]" + this.auther + ". " + this.headline + "[J]. " + this.source + ", " + this.year + ".";
			},
			copy(a) {
				let text = document.getElementById(a).innerText;
				this.$copyText(text).then((e) => {
						this.$message.success({
							message: "复制成功",
							center: true
						});
					},
					(e) => {
						this.$message.error({
							message: "复制失败",
							center: true
						});
					})
			},
			share() {
				return (new URL(document.location)).origin + "/literature/" + this.$route.params.id
			},
			changeMenu(index) {
				this.menu = index;
			},
			drawLine() {
				var chartDom = document.getElementById('line');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.x
					},
					yAxis: {
						type: 'value'
					},
					series: {
						itemStyle: {
							normal: {
								color: '#C9A0C9', //改变折线点的颜色
								lineStyle: {
									color: '#C9A0C9'
								} //改变折线的颜色 
							}
						},
						name: '被引量',
						type: 'line',
						stack: 'Total',
						data: this.y
					}
				};
				option && myChart.setOption(option);
			},
			getCookie(name) {
				var value = '; ' + document.cookie;
				var parts = value.split('; ' + name + '=');
				if (parts.length === 2) return parts.pop().split(';').shift();
			}
		}
	};
</script>

<style>
	.link {
		width: fit-content;
		color: rgb(201, 160, 201);
	}

	.link:hover {
		cursor: pointer;
		text-decoration: underline
	}

	.copy:hover {
		cursor: pointer;
		color: rgb(201, 160, 201);
	}

	.onleft {
		margin-left: 6.5%;
		width: 93.5%
	}

	.onright {
		margin-left: 17%;
		width: 83%
	}

	.shell {
		position: absolute;
		left: 0;
		width: 6.5%;
		height: 75vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: rgb(17, 24, 39);
		border-top-left-radius: 0em;
		border-top-right-radius: 0em;
		border-bottom-right-radius: 1em;
		border-bottom-left-radius: 1em;
		transition: .3s;
		overflow: hidden;
	}

	.box {
		height: 1%;
		width: 85%;
	}

	.box {
		display: block;
		justify-content: center;
		align-items: center;
		height: 15%;
		width: 85%;
		margin: 9px;
		border-radius: 5px;
		position: relative;
		transition: .3s;
		color: rgb(160, 160, 175);
	}

	.box i {
		font-size: 30px;
		position: absolute;
		margin: 15px 0 0 20px;
		/* margin-left: 30%;
		margin-top: 30%; */
	}

	.box:nth-child(1) {
		height: 0px;
	}

	.box:nth-child(1)::after,
	.box:nth-child(5)::before {
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background-color: rgb(55, 65, 81);
		position: absolute;
		bottom: -10px;
	}

	.box span {
		position: relative;
		top: 30%;
		left: 40%;
		font-size: 15px;
		opacity: 0;
		transition: .1s;
	}

	.shell:hover {
		width: 17%;
	}

	.shell:hover .contain {
		margin-left: 200px;
	}

	.box:hover {
		background-color: rgb(55, 65, 81);
	}

	.shell:hover span {
		opacity: 1;
	}

	.box:hover {
		color: #fff;
	}

	.shell:nth-child(2) {
		background-color: rgb(243, 244, 246);
	}

	.shell:nth-child(2) .box:hover {
		background-color: rgb(209, 213, 219);
		color: rgb(135, 140, 241);
	}

	.shell:nth-child(2) .box {
		color: #000;
	}

	.shell:nth-child(3) {
		background-color: rgb(49, 46, 129);
	}

	.shell:nth-child(3) .box:hover {
		background-color: rgb(67, 56, 202);
	}

	.shell:nth-child(3) .box {
		color: rgb(140, 120, 240);
	}

	.inputBox input {
		width: 100%;
		padding: 10px 20px;
		background: rgba(91, 91, 91, 0.2);
		outline: none;
		border: none;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		font-size: 16px;
		letter-spacing: 1px;
		color: #191919;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}

	.inputBox input:nth-child(2) {
		justify-content: center;
		align-items: center;
	}

	.inputBox input::placeholder {
		color: #191919;
	}

	.inputBox input[type="submit"] {
		background: #fff;
		color: #666;
		width: 75px;

		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}

	.logout {
		background: rgba(91, 91, 91, 0.2);
		outline: none;
		border: none;
		border-radius: 30px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		font-size: 16px;
		letter-spacing: 1px;
		color: #191919;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		background: #fff;
		color: #666;
		width: 100px;
		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}
</style>
